<template>
  <view class="forget">
    <view class="tab p90">找回登录密码</view>
    <view class="h20"></view>
    
    <!-- 验证手机号  -->
    <view class="code p90" v-if="step == 1">
      <view class="box" :class="{active: !isAct}">
        <view class="label">手机号</view>
        <view class="inpt">
          <input class="input" type="number" @focus="getActive(0)" v-model="mobile" maxlength="11" placeholder="请输入手机号" disabled>
        </view>
      </view>
      <view class="box" :class="{active: isAct}">
        <view class="label">验证码</view>
        <view class="inpt"><input type="number" maxlength="6" @focus="getActive(1)" placeholder="请输入验证码" v-model="code"></view>
        <view class="line">
          <span v-if="!timer" @click="getCode">获取验证码</span>
          <span v-else>重发{{count}}s</span>
        </view>
      </view> 
      <button class="sub-btn" @click="nextStep">下一步</button>
    </view>
    <!--  -->
    <!-- 设置新的密码 -->
    <view class="setNewPwd p90" v-if="step == 2">
      <view class="setNewPwd-title">
        为您的账号设置新的密码          
      </view>
      <view class="setNewPwd-phone">{{mobile}}</view>
      <view class="box">
        <view class="inpt clear-margin code-input">
          <input type="number" placeholder="请输入新的6位数密码" v-model="password" maxlength="6">
        </view>
      </view>
      <button class="sub-btn" @click="saveNewPwd">保存新密码</button>
    </view>
    <!--  -->
  </view>
</template>
  
<script>
import { SendCode } from '../../service/common/code.service.js'
import { PersonalCenter, resetLoginPwApi } from '@/service/user/user.service.js'
import md5 from 'js-md5';
import qs from 'qs';

export default {
  data () {
    return {
      isAct: false,
      canEditPhone: false,
      count: 60,
      hasGetCode: false,
      timer: null,
      mobile: '',
      password: '',
      code: '',
      step: 1
    }
  },
  methods: {
    getActive (index) {
      index == 0 ? this.isAct = false : this.isAct = true;
    },
    saveNewPwd () { // 保存新密码
      // let hash = md5.create();
      // hash.update(decodeURIComponent(qs.stringify(this.password)));
      // let password = hash.hex();
      if (!this.password) {
        uni.showToast({
          title: '请输入新密码',
          icon: 'none'
        });
        return false;
      } else {
        resetLoginPwApi({
          mobile: this.mobile,
          code: this.code,
          password: md5(this.password, 32),
          confirmPassword: md5(this.password, 32)
        }, (res) => {
          if (res.status == 0) {
            uni.showToast({
              title: '重置密码成功，请重新登录！',
              duration: 2000,
              success: () => {
               
              }
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        });
      }
    },
    nextStep () { // 下一步
      let reg = /^1[0-9]{10,10}$/;
      if (!this.mobile) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        });
        return false;
      } else if (!reg.test(this.mobile)) {
        uni.showToast({
          title: '手机号码有误，请重新输入',
          icon: 'none'
        });
        return false;
      } else if (!this.hasGetCode) {
        uni.showToast({
          title: '请先获取验证码',
          icon: 'none'
        });
        return false;
      } else if (!this.code) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        });
        return false;
      } else {
        this.step = 2;
      }
    },
    getCode () { // 获取验证码
      let reg = /^1[0-9]{10,10}$/;
      let _self = this;
      if (!this.mobile) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        });
        return false;
      } else if (!reg.test(this.mobile)) {
        uni.showToast({
          title: '手机号码有误，请重新输入',
          icon: 'none'
        });
        return false;
      } else {
        this.countDown();
        SendCode({ mobile: this.mobile, type: 4}, (res) => {
          if (res.status == 0) {
            uni.showToast({
              title: '验证码发送成功！',
              icon: 'none'
            });
            _self.hasGetCode = true;
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          };
        }) 
      }
    },
    countDown () { // 倒计时
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },
    getUserInfo () {
      PersonalCenter({}, res => {
        if (res.status == 0) {
          this.mobile = Number(res.data.mobile);
        }
      });
    }
  },
  onShow () {
    this.getUserInfo();
  },
  onLoad (option) {
    // 
  }
} 
 
</script>

<style scoped lang="scss">
.p90 {
  padding: 0 90rpx;
}
.h20 {
  width: 100%;
  height: 20rpx;
  background-color: #FAFAFA;
  margin-top: 15rpx;
}
.forget {
  height: 100vh;
  color: #333333;
  background-color: #FFFFFF;
  .tab {
    padding-top: 146rpx;
    font-size: 36rpx;
    text-align: left;
    font-weight: bold;
  }
  .code {
    .hint {
      text-align: center;
      font-size: 24rpx;
      color: #999999;
      margin-top: 17rpx;
    }
  }
  .setNewPwd {
    margin-top: 23rpx;
    .text {
      font-size: 24rpx;
      color: #999999;
    }
  }
  
  .sub-btn {
    margin-top: 112rpx;
    height: 70rpx;
    line-height: 70rpx;
    background: #636363;
    border-radius: 10rpx;
    color: #F6DA99;
    font-size: 30rpx;
    text-align: center;
    &.active {
      background-color: #434343;
      color: #F6DA99;
    }
  }
}
.box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 40rpx 0;
  font-size: 28rpx;
  border-bottom: 1rpx solid #E1E1E1;
  &.active {
    border-color: #F6DA99;
  }
  .name {
    width: 82rpx;
    font-size: 28rpx;
  }
 
  .inpt {
    flex: 1;
    // width: 320rpx;
    margin-left: 40rpx;
    input{
      font-size: 28rpx;
      font-weight:500;
    }
  }
  .clear-margin {
    margin: 0px;
  }
  
  .code-input {
    .uni-input-placeholder {
      font-size: 24rpx;
    }
  }
  .line {
    flex: 1;
    // width: 120rpx;
    text-align: right;
    font-size: 24rpx;
  }
}

.setNewPwd-title {
  font-size: 24rpx;
  font-weight:500;
  color: #999999;
}
.setNewPwd-phone {
  font-size: 24rpx;
  font-weight:500;
  line-height: 40rpx;
  color: #999999;
}

</style>
